<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Header Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<div th:fragment="header">

    <header id="app-bar" class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-elevation--z4">
        <nav class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button
                        th:if="${'true' == #strings.defaultString(#themes.code('cas.drawer-menu.enabled'), 'true')}"
                        class="mdc-icon-button mdc-top-app-bar__navigation-icon">
                    <span class="mdi mdi-menu"></span>
                    <span class="sr-only">menu</span>
                </button>
            </section>
            <section class="mdc-top-app-bar__section">
                    <span class="cas-brand mx-auto">
                        <span class="sr-only"
                              th:text="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS')}">CAS</span>
                        <img id="cas-logo" class="cas-logo"
                             th:title="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS')}"
                             th:src="@{${#strings.defaultString(#themes.code('cas.logo.file'), '/images/cas-logo.png')}}" />
                    </span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                <button id="cas-notifications-menu"
                        th:if="${'true' == #strings.defaultString(#themes.code('cas.notifications-menu.enabled'), 'true')}"
                        class="mdc-icon-button mdc-top-app-bar__action-item cas-notification-toggle"
                        aria-label="Bookmark this page">
                    <span class="mdi mdi-bell-alert"></span>
                    <span class="sr-only">notifications</span>
                    <i id="notifications-count" class="notifications-count count">2</i>
                </button>
            </section>
        </nav>

    </header>
    <aside id="app-drawer"
           th:if="${'true' == #strings.defaultString(#themes.code('cas.drawer-menu.enabled'), 'true')}"
           class="mdc-drawer mdc-drawer--dismissible mdc-drawer--modal">
        <div class="mdc-drawer__header">
            <h3 class="mdc-drawer__title" th:text="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS')}">CAS</h3>
            <h6 class="mdc-drawer__subtitle"
                th:text="${#strings.defaultString(#themes.code('cas.theme.description'), 'Central Authentication Service')}">
                Central Authentication Service</h6>
        </div>
        <div class="mdc-drawer__content">
            <nav class="mdc-list">
                <a th:href="@{/actuator}" class="mdc-list-item">
                    <i class="mdi mdi-cogs"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.endpoints}]]</span>
                </a>
                <hr class="mdc-list-divider"/>
                <a class="mdc-list-item" href="https://apereo.github.io/cas">
                    <i class="mdi mdi-file-code-outline"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.wiki}]]</span>
                </a>
                <a class="mdc-list-item" href="https://github.com/apereo/cas/pulls">
                    <i class="mdi mdi-call-merge"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.pulls}]]</span>
                </a>
                <a class="mdc-list-item" href="https://apereo.github.io/cas/developer/Contributor-Guidelines.html">
                    <i class="mdi mdi-information"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.contribguide}]]</span>
                </a>
                <a class="mdc-list-item" href="https://apereo.github.io/cas/Support.html">
                    <i class="mdi mdi-help-circle"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.support}]]</span>
                </a>
                <a class="mdc-list-item" href="https://apereo.github.io/cas/Mailing-Lists.html">
                    <i class="mdi mdi-email-newsletter"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.mailinglist}]]</span>
                </a>
                <a class="mdc-list-item" href="https://gitter.im/apereo/cas">
                    <i class="mdi mdi-message-text"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.chat}]]</span>
                </a>
                <a class="mdc-list-item" href="https://apereo.github.io/">
                    <i class="mdi mdi-post"></i>&nbsp;
                    <span class="mdc-list-item__text">[[#{cas.login.resources.blog}]]</span>
                </a>
            </nav>
        </div>
    </aside>

    <script>var countMessages = 0;</script>
    <div
            th:if="${'true' == #strings.defaultString(#themes.code('cas.notifications-menu.enabled'), 'true')}"
            class="mdc-dialog cas-notification-dialog"
            id="cas-notification-dialog" role="alertdialog"
            aria-modal="true" aria-labelledby="notif-dialog-title"
            aria-describedby="notif-dialog-content">
        
        <div class="mdc-dialog__container">
            <div class="mdc-dialog__surface">
                <h1 class="mdc-dialog__title mt-lg-2" id="notif-dialog-title">
                    Notifications
                </h1>
                <div class="mdc-dialog__content" id="notif-dialog-content">
                    <div class="cas-notification-message mdc-typography--body1" th:if="${staticAuthentication}">
                        <script>countMessages++;</script>
                        <h6 class="mdc-typography--headline6 mdi mdi-alert-circle" th:utext="#{screen.defaultauthn.title}"/>
                        <p class="text text-wrap small" th:utext="#{screen.defaultauthn.heading}">
                            <i class="mdi mdi-google"></i>
                            Static AuthN is ONLY useful for demo purposes. It is recommended that you connect CAS to
                            LDAP,
                            JDBC, etc
                            instead.
                        </p>
                    </div>
                    <div class="cas-notification-message mdc-typography--body1"
                         th:if="${not #httpServletRequest.secure}">
                        <h6 class="mdc-typography--headline6 mdi mdi-alert-circle" th:utext="#{screen.nonsecure.title}"/>
                        <script>countMessages++;</script>
                        <p class="text-wrap small" th:utext="#{screen.nonsecure.message}">
                            Unsure Connection
                        </p>
                    </div>
                </div>
                <footer class="mdc-dialog__actions">
                    <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept"
                            data-mdc-dialog-button-default>
                        <span class="mdc-button__label">OK</span>
                    </button>
                </footer>
            </div>
        </div>
        <div class="mdc-dialog__scrim"></div>
    </div>

    <script type="text/javascript">

        (function (material) {
            var header = {
                init: function () {
                    header.attachTopbar();
                    material.autoInit();
                },
                attachDrawer: function () {
                    var elm = document.getElementById('app-drawer');
                    if (elm != null) {
                        var drawer = material.drawer.MDCDrawer.attachTo(elm);
                        var closeDrawer = function (evt) {
                            drawer.open = false;
                        };
                        drawer.foundation.handleScrimClick = closeDrawer;
                        document.onkeydown = function (evt) {
                            evt = evt || window.event;
                            if (evt.keyCode == 27) {
                                closeDrawer();
                            }
                        };
                        header.drawer = drawer;
                        return drawer;
                    }
                    return undefined;
                },
                attachTopbar: function (drawer) {

                    var drawer = header.attachDrawer();
                    var dialog = header.attachNotificationDialog();

                    if (drawer != undefined) {
                        header.attachDrawerToggle(drawer);
                    }
                    if (dialog != undefined) {
                        header.attachNotificationToggle(dialog);
                    }
                },
                checkCaps: function (ev) {
                    var s = String.fromCharCode(ev.which);
                    if (s.toUpperCase() === s && s.toLowerCase() !== s && !ev.shiftKey) {
                        ev.target.parentElement.classList.add('caps-on');
                    } else {
                        ev.target.parentElement.classList.remove('caps-on');
                    }
                },
                attachDrawerToggle: function (drawer) {
                    let appBar = document.getElementById('app-bar');
                    if (appBar != null) {
                        var topAppBar = material.topAppBar.MDCTopAppBar.attachTo(appBar);
                        topAppBar.setScrollTarget(document.getElementById('main-content'));
                        topAppBar.listen('MDCTopAppBar:nav', function () {
                            drawer.open = !drawer.open;
                        });
                        return topAppBar;
                    }
                    return undefined;
                },
                attachNotificationDialog: function () {
                    var element = document.getElementById('cas-notification-dialog');
                    if (element != null) {
                        return material.dialog.MDCDialog.attachTo(element);
                    }
                    return undefined;
                },
                attachNotificationToggle: function (dialog) {
                    var btn = document.getElementById('cas-notifications-menu');
                    if (btn != null) {
                        btn.addEventListener('click', function () {
                            dialog.open();
                        });
                    }
                }
            }
            document.addEventListener('DOMContentLoaded', function () {
                header.init();
                if (countMessages == 0) {
                    window.jQuery('#notifications-count').remove();
                } else {
                    window.jQuery('#notifications-count').text("(" + countMessages + ")")
                }
            });
        })(mdc);
    </script>
</div>


</body>

</html>
